1
|
|
|
"use strict"; |
2
|
|
|
Object.defineProperty(exports, "__esModule", { value: true }); |
3
|
|
|
const globals_1 = require("../globals/globals"); |
4
|
|
|
(function (root, factory) { |
5
|
|
|
if (typeof globals_1.define === 'function' && globals_1.define.amd) { |
6
|
|
|
globals_1.define([], factory); |
7
|
|
|
} |
8
|
|
|
else if (typeof module === 'object' && module.exports) { |
9
|
|
|
module.exports = factory(); |
10
|
|
|
} |
11
|
|
|
else { |
12
|
|
|
root.Tabs = factory(); |
13
|
|
|
} |
14
|
|
|
}(typeof self !== 'undefined' ? self : this, function () { |
|
|
|
|
15
|
|
|
class Tabs { |
16
|
|
|
constructor(options) { |
17
|
|
|
this.options = options || {}; |
18
|
|
|
this.options.tabTogglers = (Object.keys(this.options).length && options.tabTogglers) ? (typeof options.tabTogglers === 'string' ? document.querySelectorAll(options.tabTogglers) : options.tabTogglers) : document.querySelectorAll('.tabs [data-pane]'); |
19
|
|
|
this.onInit(); |
20
|
|
|
this.onLoad(); |
21
|
|
|
} |
22
|
|
|
static clearClasses(arr) { |
23
|
|
|
arr.forEach(function (el) { |
24
|
|
|
el.classList.remove('active'); |
25
|
|
|
}); |
26
|
|
|
} |
27
|
|
|
onLoad() { |
28
|
|
|
if (this.options && this.options.onLoad) { |
29
|
|
|
this.options.onLoad(); |
30
|
|
|
} |
31
|
|
|
} |
32
|
|
|
onInit() { |
33
|
|
|
this.setCurrentOnInit(); |
34
|
|
|
this.initClasses(); |
35
|
|
|
this.changeCurrent(); |
36
|
|
|
} |
37
|
|
|
setCurrentOnInit() { |
38
|
|
|
let currentTabToggler = (this.options.tabTogglers)[0]; |
39
|
|
|
let currentPane; |
40
|
|
|
if (this.options.tabTogglers[0] instanceof HTMLElement) { |
|
|
|
|
41
|
|
|
currentPane = document.getElementById(currentTabToggler.dataset.pane); |
42
|
|
|
} |
43
|
|
|
currentTabToggler.classList.add('active'); |
44
|
|
|
currentPane.classList.add('active'); |
|
|
|
|
45
|
|
|
} |
46
|
|
|
initClasses() { |
47
|
|
|
this.options.tabTogglers.forEach(function (tabToggler) { |
48
|
|
|
let matchedPane = document.getElementById(tabToggler.dataset.pane); |
49
|
|
|
matchedPane.classList.add('tab-pane'); |
50
|
|
|
}); |
51
|
|
|
} |
52
|
|
|
changeCurrent() { |
53
|
|
|
let that = this; |
54
|
|
|
that.options.tabTogglers.forEach(function (tabToggler) { |
55
|
|
|
tabToggler.addEventListener('click', function (e) { |
56
|
|
|
e.preventDefault(); |
57
|
|
|
let parentEl = this.closest('.tabs').parentElement; |
58
|
|
|
Tabs.clearClasses(that.options.tabTogglers); |
59
|
|
|
Tabs.clearClasses(parentEl.querySelectorAll('.tab-pane')); |
60
|
|
|
this.classList.add('active'); |
61
|
|
|
let matchedPane = parentEl.querySelector('#' + this.dataset.pane); |
62
|
|
|
matchedPane.classList.add('active'); |
63
|
|
|
}); |
64
|
|
|
}); |
65
|
|
|
} |
66
|
|
|
} |
67
|
|
|
return Tabs; |
68
|
|
|
})); |
69
|
|
|
|
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.